<template>
    <div>
       <el-dialog
        :visible.sync="centerDialogVisible"
        :close-on-click-modal="false"
        :before-close="close"
        width="35%"
        top="15vh"
       >
        <div slot="title">
            <span style="text-align: center;font-size: 20px;color: #000; display: flex;justify-content: center;">访问次数</span>
        </div>
        <div class="integral_content">
            <div class="integral_content_top">
                <div style="display:flex; align-items: center;">
                   <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="250px" hide-required-asterisk>
                        <el-form-item
                            label="访问次数在今日原基础上，增加"
                            prop="visitsInput"
                            :rules="[{ required: true, message: '访问次数不能为空'}, { type: 'number', message: '访问次数必须为数字值'}]">
                            <el-input type="visitsInput" 
                                      v-model.number="numberValidateForm.visitsInput" 
                                      placeholder="请输入访问次数">
                            </el-input>
                        </el-form-item>
                   </el-form>
                   <span style="margin-left: 7px; margin-top: -20px; font-size: 16px;">次</span>
                </div>
            </div>
        </div>  
        <div slot="footer" class="dialog-footer" style="margin-top: 20px;">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="submitForm('numberValidateForm')">确 定</el-button>
        </div>
       </el-dialog>
    </div>
</template>

<script>
export default {
  name: "numberOfvisits",
  props: {
    propsObj: {   // 用户数据
      type: Object,
      required: true,
    }
  },
  data() {
    return {
      centerDialogVisible: true,  
      userObj: {},
      numberValidateForm: {
        visitsInput: ''
      }
    }
  },
  watch: {
    propsObj: {
      handler(val,oldval){
        this.userObj = val;
      },
      deep:true,
      immediate:true
    }
  },
  methods: {
    // 关闭弹框；
    closeNumberOfvisitsDialog(){
      this.centerDialogVisible = false;
    },
    close(){
      this.$emit('closeNumberOfvisitsDialog');
    },
    // 确定
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('uservisits',this.numberValidateForm)
          this.$message.success('增加成功！');
          this.close();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
}
</script>

<style lang="less" scoped>
@import '@/style/variables.less';
.integral_content{
    margin-left: 5%;
    .integral_content_top{
       margin-top: 20px;
       width: 100%;
       display: flex;
       justify-content: start;
       align-items: center;
    }
}
</style>
<style lang="less">
.integral_content_top .el-form-item__label {
    font-size: 16px;
}
</style>